<!--添加设备-->
<template>
    <div>
      <el-form :rules = "rules" ref="formLabelAlign" :label-position="labelPosition" label-width="80px" :model="formLabelAlign" id = "form">
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>

        <el-form-item label="设备地址" prop="address">
          <el-input v-model="formLabelAlign.address"></el-input>
        </el-form-item>

        <el-form-item label="经度" prop="lat">
          <el-input v-model="formLabelAlign.lat"></el-input>
        </el-form-item>

        <el-form-item label="纬度" prop="lng">
          <el-input v-model="formLabelAlign.lng"></el-input>
        </el-form-item>

        <el-form-item label="dtu编号" prop="dtuid">
          <el-input v-model="formLabelAlign.dtuid"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" plain id="button1"  @click="submitForm">提交</el-button>
      <el-button type="primary" plain id="button2" @click="resetForm('formLabelAlign')">取消</el-button>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  export default {
    data() {
      var checkName = (rule,value,callback) => {
        if(!value)
          return callback(new Error('设备名不能为空'));
      }
      var checkAdd = (rule,value,callback) => {
        if(!value)
          return callback(new Error('设备地址不能为空'));
      }
      var checkLat = (rule,value,callback) => {
        if(!value)
          return callback(new Error('经度不能为空'));
        else if(isNaN(value))
          return callback(new Error('请输入合法数字'));
        else if(value > 180 || value < 0)
          return callback(new Error('请输入合法数字'));

      }
      var checkLng = (rule,value,callback) => {
        if(!value)
          return callback(new Error('纬度不能为空'));
        else if(isNaN(value))
          return callback(new Error('请输入合法数字'));
        else if(value > 180 || value < 0)
          return callback(new Error('请输入合法数字'));
      }
      var checkDtuid = (rule,value,callback) => {
        if(!value)
          return callback(new Error('dtu编号不能为空'));
        else if(isNaN(value))
          return callback(new Error('请输入合法数字'));
      }
      return {
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          address: '',
          lat: '',
          lng:'',
          dtuid:''
        },
        rules: {
          name: [
            {validator: checkName, trigger: 'blur'}
          ],
          address:[
            {validator: checkAdd, trigger: 'blur'}
          ],
          lat: [
            {validator: checkLat, trigger: 'blur'}
          ],
          lng:[
            {validator: checkLng, trigger: 'blur'}
          ],
          dtuid:[
            {validator: checkDtuid, trigger: 'blur'}
          ]
        }
      }
    },
      async created() {
          let user = JSON.parse(localStorage.getItem("honey-user") || '{}')
          const config = {
              headers: {
                  // 设置内容类型为JSON
                  'Content-Type': 'application/json;charset=UTF-8',
                  // 添加token到请求头
                  'token': user.token || '',
              }
          }
          //this.$request.post('/device',this.formLabelAlign).then(res => {
          const res = await axios.get('http://127.0.0.1:8000/device',config)
          if(res.data.code == '401')
              this.$router.push('/')
      },
      methods:{
      async submitForm(){
          let user = JSON.parse(localStorage.getItem("honey-user") || '{}')
          const config = {
              headers: {
                  // 设置内容类型为JSON
                  'Content-Type': 'application/json;charset=UTF-8',
                  // 添加token到请求头
                  'token': user.token || '',
              }
          }
          //this.$request.post('/device',this.formLabelAlign,config).then(res => {
        const res = await axios.post('http://127.0.0.1:8000/device',this.formLabelAlign,config)
        console.log(res.data.code)
        if( res.data.code == '200')
          this.$router.push('/success')
        else
          this.$router.push('/error')
        //})
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
  }
  </script>
  
  <style>

  #form{
    margin-top: 50px;
    width: 80%;
  }
  #button1{
    position:fixed;
    left:300px;
    top: 500px;
  }

  #button2{
    position:fixed;
    left:700px;
    top: 500px;
  }
  </style>